<template>
	<div class="comment">
		<div class="login">
			<span class="collection"></span>
			<span class="fabulous"></span>
			<span class="makeCom"></span>
			<span @click="goLogin">登录</span>
		</div>
		评论：<input type="text" placeholder="来说两句吧 . .">
	</div>
</template>

<script>
export default {
	methods: {
		goLogin(){
			this.$store.dispatch('showLogin', true)
		}
	}
}
</script>


<style lang="scss" scoped>
@function rem($px){
    @return ($px/75)+rem;
}
.comment{
	.login{
		display: flex;
		margin-bottom: rem(30);
		span{
			flex:1;
			text-align: center;
			padding:rem(20) 0;
		}
		.collection{
			background: url(../../../assets/images/66.png)  center no-repeat;
			background-size: rem(50);
		}
		.fabulous{
			background: url(../../../assets/images/22.png)  center no-repeat;
			background-size: rem(50);
		}
		.makeCom{
			background: url(../../../assets/images/11.png)  center no-repeat;
			background-size: rem(50);
		}
	}

	input{
		width:80%;
		margin: 0 auto;
		line-height: rem(70);
		border:1px solid #ddd;
		border-radius:rem(8);
		padding-left: rem(20);
	}
}
</style>